<template>
  <div class="container">
    <ul class="step">
      <li class="step-li" :class="step == 0 ? 'active' : ''">
        <span>1</span>
        <p>填写基本信息</p>
      </li>
      <li class="step-li" :class="step == 1 ? 'active' : ''">
        <span>2</span>
        <p>筛选推荐内容</p>
      </li>
      <li class="step-li" :class="step == 2 ? 'active' : ''">
        <span>3</span>
        <p>确认已选信息</p>
      </li>
      <li class="step-li" :class="step == 3 ? 'active' : ''">
        <span>4</span>
        <p>开始创建档案</p>
      </li>
    </ul>
    <div class="step-info">
      <ul class="step-info-ul" v-show="step == 0">
        <li class="step-info-li">
          <span class="s1"> <i>*</i>档案类型</span>
          <div>
            <el-select
              class="step-ipt"
              v-model="manageInfo.profileType"
              placeholder="请选择档案类型"
            >
              <el-option
                v-for="(item, index) in manageList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <span class=""></span>
        </li>
        <li class="step-info-li">
          <span class="s1"> <i>*</i>名称</span>
          <el-input class="step-ipt" v-model="manageInfo.entityName"  type="txt" placeholder="请填写名称"></el-input>
          <span class=""></span>
        </li>
        <li class="step-info-li">
          <span class="s1"> <i>*</i>包含的特征</span>
          <div class="ipt-box">
            <el-input class="step-ipt" v-model="label1" type="txt" placeholder="请填写特征词"></el-input>
            <p class="tips" v-show="!manageInfo.featWords.length">请至少填写一项特征词</p>
            <div class="label-d" v-show="manageInfo.featWords.length">
              <span class="label-item" v-for="(item,index) in manageInfo.featWords" :key="index">
                <i @click="removeItem(index,'featWords')" class="el-icon-close"></i>
                {{item}}
              </span>
            </div>
          </div>
          <span class="again" @click="setLabel1"><i class="el-icon-plus"></i>继续填写</span>
        </li>
        <li class="step-info-li">
          <span class="s1">排除的特征</span>
          <div class="ipt-box">
            <el-input class="step-ipt"  v-model="label2" type="txt" placeholder="请填写特征词"></el-input>
            <div class="label-d" v-show="manageInfo.excludeWords.length">
              <span class="label-item" v-for="(item,index) in manageInfo.excludeWords" :key="index">
                <i @click="removeItem(index,'excludeWords')" class="el-icon-close"></i>
                {{item}}
              </span>
            </div>
          </div>
          <span class="again" @click="setLabel2"><i class="el-icon-plus"></i>继续填写</span>
        </li>
      </ul>
      <div class="step-info-tj" v-show="step == 1">
        <p class="tip">请从下列信息中筛选【名称】相关信息</p>
        <p class="tips">*按照相关信息、无关信息、不确定信息筛选如下信息，其中相关信息将纳入档案、无关信息将排除出档案、不确定信息将在后续补充信息时作为参考</p>
        <ul class="info-ul" v-loading="loading">
          <li class="info-item" v-for="(item,index) in checkList" :key="index">
            <div class="item-top">
              <span class="name">{{item.entityName}}</span>
              <div class="change">
                  <el-radio class="el-chek" v-model="item.checked" label="1">相关信息</el-radio>
                  <el-radio class="el-chek" v-model="item.checked" label="2">无关信息</el-radio>
                  <el-radio class="el-chek" v-model="item.checked" label="3">不确定</el-radio>
              </div>
            </div>
            <ul class="item-ul" :class="!ItemShowAll ? 'all' : ''">
              <li class="item-list" v-for="(items,indexs) in item.contents" :key="indexs">
                <span>证据{{numToCh(1)}}</span>
                <p class="txt">{{items}}</p>
              </li>
            </ul>
            <p class="more">
              <span  @click="ItemShowAll = !ItemShowAll"> 查看更多证据 <i class="jt el-icon-d-arrow-right" :class="!ItemShowAll ? 'rot' : ''"></i> </span>
            </p>
          </li>
         
        </ul>
        <p class="more">
          <span> 加载更多 <i class="jt el-icon-d-arrow-right"></i> </span>
        </p>
      </div>
      <div class="step-info-tj" v-show="step == 2">
        <ul class="tab">
          <li class="tab-list" :class="tab==1?'active':''" @click="showTab(1)">相关信息<span>{{sureNum}}</span>个</li>
          <li class="tab-list" :class="tab==2?'active':''" @click="showTab(2)">无关信息<span>{{nothingNum}}</span>个</li>
          <li class="tab-list" :class="tab==3?'active':''" @click="showTab(3)">不确定信息<span>{{uncertainNum}}</span>个</li>
        </ul>
         <ul class="info-ul">
          <li class="info-item" v-for="(item,index) in checkedList" :key="index">
            <div class="item-top">
              <span class="name">{{item.entityName}}</span>
              <div class="change">
                  <el-radio class="el-chek" v-model="item.checked" label="1">相关信息</el-radio>
                  <el-radio class="el-chek" v-model="item.checked" label="2">无关信息</el-radio>
                  <el-radio class="el-chek" v-model="item.checked" label="3">不确定</el-radio>
              </div>
            </div>
            <ul class="item-ul" :class="!ItemShowAll ? 'all' : ''">
              <li class="item-list" v-for="(items,indexs) in item.contents" :key="indexs">
                <span>证据{{numToCh(1)}}</span>
                <p class="txt">{{items}}</p>
              </li>
            </ul>
            <p class="more">
              <span  @click="ItemShowAll = !ItemShowAll"> 查看更多证据 <i class="jt el-icon-d-arrow-right" :class="!ItemShowAll ? 'rot' : ''"></i> </span>
            </p>
          </li>
        </ul>
        <p class="show-info">您已筛选出<span>{{sureNum}}</span>个正确信息，<span>{{nothingNum}}</span>个错误信息，<span>{{uncertainNum}}</span>个不确定信息</p>
        <p class="show-tips">*相关信息越多，档案越准确</p>
      </div>
      <div class="step-info-success" v-show="step == 3">
          <div class="suc-box">
            <i class="iconf iconsousuo"></i>
            <div v-if="!success">
              <p class="tips">系统正在全网检索档案信息，请等待1-5分钟</p>
              <p class="tips">已检索特征词<span>{{this.manageInfo.featWords.length}}</span>个.....</p>
            </div>
            <div v-else>
               <p class="tips">档案创建成功，点击访问</p>
               <p><el-button type="primary" @click="linkDetail">{{manageInfo.entityName}}</el-button></p>
            </div>
          </div>
      </div>
       <div class="step-info-btn" :class="step!=0?'right':''">
          <el-button class="btn-up" size="small" @click="step--" v-show="step != 0 && step < 3">返回上一步</el-button>
          <el-button type="primary" size="small" @click="setStep" v-show="step < 3">{{step == 0?'下一步':step == 1?'确认已选信息':'开始创建档案'}}</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import { CreateProfileEntity,GetRecordFilter } from "@/api/personal";
import { tipErr, tipSuc, tipWarn, formatDate,funcChangeNumToCHN } from "@/utils/index";
export default {
  data() {
    return {
      step: 0,
      label1:'',
      label2:'',
      loading:false,
      
      manageList: [
        {
          label: "人物档案",
          value: "PERSON",
        },
        {
          label: "机构档案",
          value: "ORGANIZATION",
        },
      ],
      manageInfo:{
        profileType:'',
        entityName:'',
        featWords:[],
        excludeWords:[],
        appkey:"createNewProfileEntity"
      },
      entityId:'',
      featWords:[],
      excludeWords:[],
      checkList:[],
      checked:'',
      ItemShowAll:true,
      tab:1,
      sureNum:0,
      nothingNum:0,
      uncertainNum:0,
      success:false,
    };
  },
  computed:{
    checkedList(){
      let arr;
     this.sureNum=0
     this.nothingNum=0
     this.uncertainNum=0
      arr = this.checkList.filter(item=>{
        if(item.checked == 1){
          this.sureNum++
        }else if(item.checked == 2){
          this.nothingNum++
        }else if(item.checked == 3){
          this.uncertainNum++
        }
        return item.checked == this.tab
      })
      return arr
    },
    wordsList(){
      let arr;
      arr = this.checkList.filter(item=>{
        return item.checked == 1 || item.checked ==2
      })
      return arr
    }
  },
  watch:{
    wordsList(nVal){
      let [arr,arr2] = [[],[]];
      this.featWords = []
      this.excludeWords = []
      nVal.forEach(item=>{
        if(item.checked == 1){
          arr.push(item.entityName)
        }else if(item.checked == 2){
          arr2.push(item.entityName)
        }
      })
      this.featWords = [...arr]
      this.excludeWords = [...arr2]
    },
  },
  methods:{
    setLabel1(){
      if(this.label1.trim() == ''){
        tipWarn('请填写特征词~')
      }else{
        this.manageInfo.featWords.push(this.label1)
        this.label1=''
      }
    },
    setLabel2(){
       if(this.label2.trim() == ''){
        tipWarn('请填写排除特征词~')
      }else{
        this.manageInfo.excludeWords.push(this.label2)
        this.label2=''
      }
    },
    removeItem(index,key){
      let newA = [...this[key]]
      this[key] = newA.filter((item,indexs)=>{
        return index != indexs
      })
    },
    linkDetail(){
      let name;
      if(this.manageInfo.profileType == 'PERSON'){
        name='personalDetail'
      }else{
        name='organizationDetail'
      }
      this.$router.push({
        name:name,
        query: {
          entityId: this.entityId,
          name: this.manageInfo.entityName,
        },
      })
    },
    async _CreateProfileEntity(){
      this.manageInfo.featWords = [...this.manageInfo.featWords,...this.featWords]
      this.manageInfo.excludeWords = [...this.manageInfo.excludeWords,...this.excludeWords]
      let params = Object.assign(this.manageInfo,{"appkey":"profileCreateParam"})
      try{
        let {data,code,mas} = await CreateProfileEntity(params)
         if (code == 1) {
            tipSuc("创建成功");
            this.success = true
            this.entityId = entityId
          } else {
            tipErr("创建失败");
          }
      }catch(err){
        tipErr("创建失败");
      }
     
    },
    async _GetRecordFilter(){
      let params = Object.assign(this.manageInfo,{"appkey":"getRecordFilter"})
      let {data,code,mas} = await GetRecordFilter(params)
      this.loading = false
      if(code == 1){
        this.checkList = [...data]
      }
      
    },
    setStep(){
      if(this.step==0){
        if(!this.manageInfo.profileType){
          tipErr('请选择档案类型')
          return
        }
        if(!this.manageInfo.entityName){
          tipErr('请输入名称')
          return
        }
        if(!this.manageInfo.featWords.length){
          tipErr('请至少填写一项特征词')
          return
        }
      }
      this.step++
      if(this.step == 1){
        this.loading = true
        this._GetRecordFilter()
      }
      if(this.step == 3){
        this._CreateProfileEntity()
      }
    },
    showTab(index){
      this.tab = index
    },
    numToCh(num){
      return funcChangeNumToCHN(num)
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 1400px;
  min-height:80vh;
  margin: 0 auto;
  padding-top: 40px;
  background: #1f2025;
  display: flex;
  flex-direction: column;
  align-items: center;
  .step {
    display: flex;
    &-li {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      color: #8a8f99;
      line-height: 16px;
      margin: 0 50px;
      span {
        width: 26px;
        height: 26px;
        background: #262930;
        border-radius: 50%;
        font-size: 16px;
        color: #eee;
        text-align: center;
        line-height: 26px;
        margin-bottom: 10px;
        font-style: italic;
        box-sizing: border-box;
        padding-right: 3px;
      }
      &.active {
        color: #cc7029;
        span {
          background: #cc7029;
          box-shadow: 0px -1px 0px 0px #f59449;
          color: #fff;
        }
      }
    }
  }
}
.step-info {
  &-ul {
    display: table;
    border-collapse: separate;
    border-spacing: 0 15px;
    margin-top: 60px;
  }
  &-li {
    display: table-row;
    span,
    div {
      display: table-cell;
    }
    .s1 {
      width: 120px;
      padding-right: 14px;
      text-align: right;
      font-size: 14px;
      color: #b8becc;
      font-weight: 700;
      i {
        color: #cc7029;
        font-style: normal;
        margin-right: 4px;
      }
    }
    .again{
      padding-left:40px;
      font-size:14px;
      color:#CC7029;
      cursor:pointer;
      .el-icon-plus{
        font-size:18px;
        vertical-align: middle;
        margin-top: -5px;
      }
    }
    .ipt-box{
      width:400px;
      .tips{
        padding-left:16px;
        font-size:12px;
        color:#525966;
        line-height:20px;
      }
      .step-ipt{
        margin-bottom:10px;
      }
      .label-d{
        display:flex;
        flex-wrap:wrap;
        .label-item{
          height:20px;
          padding:0 5px;
          background:#262930;
          margin:0 10px 10px 0;
          position:relative;
          font-size:12px;
          color:#8a8f99;
          .el-icon-close{
            display:none;
            font-size:14px;
            color:#CC7029;
            position:absolute;
            top:-4px;
            right:-4px;
            cursor: pointer;
          }
          &:hover{
            .el-icon-close{
              display: block;
            }
          }
        }
      }
    }
    .step-ipt /deep/ {
      display:block;
      width: 400px;
      height: 40px;
      background: #262930;
      box-shadow: 0px -1px 0px 0px #282c33;
      border-radius: 2px;
      border: none;
      .el-input__inner {
        border: none;
        &::-webkit-input-placeholder{
          color:#525966;
        }
      }
    }
  }
  &-btn{
    width:100%;
    text-align:right;
    padding-right:114px;
    box-sizing: border-box;
    &.right{
      padding-right:30px;
    }
  }
  &-tj{
    width:1400px;
    padding:40px 30px;
    box-sizing: border-box;
    .tip{
      font-size:14px;
      color:#B8BECC;
      line-height:16px;
      margin-bottom:15px;
    }
    .tips{
      font-size:12px;
      color:#737780;
      line-height:16px;
      margin-bottom:12px;
    }
    .info-ul{
      min-height:200px;
      .more{
      text-align:right;
      padding-top:0;
    }
    }
    .info-item{
      width:100%;
      padding:20px 30px;
      box-sizing:border-box;
      background:#262930;
      margin-bottom:10px;
      .item-top{
        display:flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .name{
          font-size:20px;
          color:#eee;
          line-height:24px;
          font-weight:600;
        }
      }
    }
    .item-ul{
      height:42px;
      overflow: hidden;
      &.all{
        height:auto
      }
    }
    .item-list{
      display: flex;
      margin-bottom:20px;
      span{
        font-size:14px;
        color:#CC7029;
        line-height:22px;
        width:100px;
      }
      .txt{
        font-size:14px;
        color:#B8BECC;
        line-height:22px;
      }
    }
    .more{
      text-align:center;
      padding-top:10px;
      .jt{
        font-size:16px;
        margin-top: -2px;
        vertical-align: middle;
      }
    } 
    .tab{
      display:flex;
      border-left:1px solid rgba(204, 112, 41, .4);
      .tab-list{
        border-top:1px solid rgba(204, 112, 41, .4);
        border-right:1px solid rgba(204, 112, 41, .4);
        border-bottom:1px solid rgba(204, 112, 41, .4);
        height:40px;
        box-sizing:border-box;
        font-size:14px;
        color:#B8BECC;
        line-height:38px;
        padding:0 15px;
        cursor:pointer;
        span{
          font-size:16px;
          color:#CC7029;
          font-weight:600;
        }
        &.active{
          border-color:#CC7029;
          background:#CC7029;
          color:#fff;
          span{
            color:#fff;
          }
        }
      }
    }
    .show-info{
      text-align:right;
      font-size:14px;
      color:#B8BECC;
      line-height:16px;
      padding:10px 0 15px;
      span{
        font-size:16px;
        color:#CC7029;
        font-weight:600;
      }
    }
    .show-tips{
      text-align:right;
      font-size:12px;
      color:#737780;
    }
  }
  &-success{
    margin:189px auto 0;
    width: 600px;
    height: 400px;
    background: #24262B;
    border-radius: 20px;
    padding:50px;
    box-sizing: border-box;
    .suc-box{
      width: 500px;
      height: 300px;
      background: rgba(255, 255, 255, 0);
      border: 1px dashed #363840;
      border-radius: 20px;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items: center;
    }
    .iconf{
      width: 110px;
      height: 80px;
      background: #2B2D33;
      border-radius: 15px;
      line-height: 80px;
      text-align:center;
      font-size:36px;
      color:#B8BECC;
      margin:87px 0 28px;
    }
    .tips{
      font-size:16px;
      color:#B8BECC;
      line-height:18px;
      margin-bottom:18px;
      span{
        font-size:16px;
        color:#CC7029;
        font-weight:600;
        margin:0 5px;
      }
    }
  }
}
</style>
